<template>
    <div class="time-arrow-from-manufacture-code">
        <div class="date">
            <wp-icon
                class="icon-content"
                name="goumairiji"
                size="30" />
            <div class="date-title">
                购买日期
            </div>
            <div class="date-content">
                {{detailData.solddate&&detailData.solddate||'暂无数据'}}
            </div>
        </div>
        <div class="arrow">
            <wp-icon
                class="icon-content"
                name="daojishi"
                color="#A9A9A9"
                size="30" />
            <img
                class="arraw-img"
                src="../../../../assets/arrow.png"/>
            <div
                class="rest-date"
                v-if="detailData.remainingwarrantydays>0">
                剩余{{detailData.remainingwarrantydays&&detailData.remainingwarrantydays}}天
            </div>
            <div
                v-else-if="detailData.remainingwarrantydays===0"
                class="rest-date">
                已过期
            </div>
            <div
                v-else
                class="rest-date-without-data">
                暂无数据
            </div>
        </div>
        <div class="date">
            <wp-icon
                class="icon-content"
                name="shield"
                color="#3688FF"
                size="30" />
            <div class="date-title">
                保修到期
            </div>
            <div class="date-content">
                {{detailData.warrantyexpiredate&&detailData.warrantyexpiredate||'暂无数据'}}
            </div>
        </div>
    </div>
</template>

<script>
import WpIcon from '@/components/_wp_components/WpIcon.vue';
export default {
    props: {
        detailData: String
    },
    components: { WpIcon }

};
</script>

<style lang="scss" scoped>
.time-arrow-from-manufacture-code{
    display: flex;
    justify-content: space-around;
    .date{
        height: 100px;
        width: 73px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .icon-content{
            margin-top: 10px;
        }
        .date-title{
            font-size: 13px;
        }
        .date-content{
            height: 17px;
            font-size: 13px;
            color: rgba(0,0,0,0.4);
            margin-bottom: 15px;
        }
    }
    .arrow{
        height: 100px;
        width: 110px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .arraw-img{
            width: 100px;
        }
        .icon-content{
            margin-top: 10px;
        }
        .rest-date{
            font-size: 13px;
            color: #E84026;
            margin-bottom: 15px;
        }
        .rest-date-without-data{
            font-size: 13px;
            color: rgba(0,0,0,0.4);
            height: 17px;
            margin-bottom: 15px;
        }
    }
}
</style>
